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A Software Design Manifesto 

"The daily experience of using computers far too often is still 
fraught with difficulty, pain, and barriers for most people." 

— Mitch Kapor, Lotus 


Poor Usability 

IT departments neglect usability in favor of cost 
— Samsung survey 



Poor Usability 

What if software engineers developed 
user interfaces ... 



"User Interface Design" 


http://www.dilbert.com/strips/comic/2002-09-23/ 



*r»l Displays 


Current Selection 

VGA Display (DDC) 

It 52 x 870, 75Hz 
Millions of Colors 


ATI Display Control Panel 


http://www.dilbert.com/strips/comic/2002-09-24/ 

http://www.dilbert.com/strips/comic/2001-04-14/ 
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Features 

Complexity causes 50% of product returns 
— Elke den Ouden, TU Eindhoven 



Featuritus? 
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Features 



Engineers, scientists, programmers ... 

are not representative of normal people 



© ThinkGeek 



Coogle! Search Engine 


Ooogile! 

Search the web using Google! 

10 results ( Google Search ) ( I'm feeling lucky ) 

Index contains ~25 million pages (soon to be much bigger) 

About Goog le! 

Stanford Search Linux Search 

Get Google! updates monthly! 

your e-mail ( Subscribe ) Archive 

Copyright Cl997-8 Stanford University 
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"Googley User Experience" 

C Link: 

http://www.google.com/corporate/ux.html 




Google.ca offered in: frangais 

Advertising Programs Business Solutions About Google Go to Google.com 

© 2011 - Privacy 


Change background image 


li 



































Usability 

"Surprises" 

Some approaches: 
focus on user tasks 

Do we really need vowels? 

conduct studies of users 

H*p* y* • c»n r**dth»ss*nt»nc» w*th»*tth* v»w*ls. 

get feedback from users during design 

Cn y rd ths qstn? 

see good and bad examples 


use user interface design guidelines 


employ graphic design 


apply principles from psychology & sociology 



"Surprises" 

"Surprises" 

Do we really need to spell correctly? 

Link: 

http://web.princeton.edu/sites/opplab 

"Aoccdrnig to rscheearch at an Elingsh uinervtisy, it 
deosn't mttaer in waht oredr the Itteers in a wrod are, the 
olny iprmoetnt tihng is taht the frist and Isat Itteer is at the 
rghit pclae." 

/pa pers/Diema nd-Yauman_Oppenheimer_2010.pdf 

Disfluency through harder-to-read fonts can be better for long 
term learning. 


Human Computer Interaction 

Many interaction styles over the years: 
rewiring 

punched cards 

programming 

command line 

choices and prompts 

forms 

graphical user interface 
point and click 
touch-based 
gesture-based 


Graphical User Interface 

Underlying principles: 
user in control 

• reduce certain "modes" that overly limit the 
user 

manipulate objects 

• syntax is select (noun), then act (verb) 
visibility of the objects of interest 

• exploit recognition, not recall 

• affordance (appearance suggests form of 
interaction) 


Graphical User Interface 

Underlying principles: 

incremental action with rapid feedback 

• show objects as they are moved or resized 
reversible actions (instant undo) and canceling 

• encourage safe exploration 
every choosable action is legal 

• gray out invalid choices 


Graphical User Interface 

Support learning through metaphors: 

familiar settings to teach new concepts 

• desktop, menus, rooms, shopping carts 
metaphors can only go so far 

• trash can on the desktop? 
carried to non-intuitive situations 

• drag disk icon to trash to unmount it? 
cultural differences 


menus imply the availability of choice 




© General Magic 
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EDS Cat Herders 
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Exercise 


Find user interface problems. 


^ ^ ^ Book a Flight 

Book Flights 


Departure Date 

From To 

Morning t ) Jan i | 1 i ) 


Arrival Date 

(enter 1ATA airport code) 

Morning C ) Jan i ] 1 t | 

Fair class: 


ECONOMY T) 


# of Passengers: 

One way: □ 

(up to 9) 

Round trip: □ 

© 


( Execute ) ( Cancel ) 


A 


© Isys Information Architects 
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Consistency, Consistency, Consistency 


Consistency, Consistency, Consistency 


Principles: 

predictable 

• what comes next is clear from what came 
before 

generalizable 

• specific cases extend to new situations 

stable 

• consistently placed targets in the user interface 


Lexical consistency: 

consistent with common usage 

• e.g., left = less, right = more 
consistent abbreviation rules 

• e.g., Jan, Feb, Mar, etc. (all equal length) 
symbols used consistently 

• e.g., ellipsis (...) to bring up a dialog from a 
button 
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Consistency, Consistency, Consistency 

Syntactic consistency: 

e.g., consistent order of menus and menu items 



Edit Format Window Help 


New 

&N 

Open... 

&0 

Open Recent 

► 

Close 

ssw 

Save 

&s 

Save As... 

osss 

Save As PDF... 


Save All 


Revert to Saved 


Attach Files... 

OS£A 

Show Properties 

X&P 

Page Setup... 

osgp 

Print... 

— 

3€P 

— 
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Platform 

Open 


' < ► ] f SS = < HD) | ^ Users 14^ Q 



Plain Text Encoding: Automatic 

C Ignore rich text commands 

^ Cancel ) Open ^ 




Consistency 


Monaco 

Monaco 10.0 pt. 


EH OlH [!■ O0in • 


O 315" 


Collection 


All Fonts 
English 
Favorites 
Recently Used 
Fixed Width 
Fun 

Modern 

PDF 

Traditional 

Web 

Windows Office Comp 


030 


Family Typeface 

Microsoft Sans Serif A Regular 
Minion Pro 
Mistral 

Modern No. 20 
Mona Lisa Solid ITC T 
Monaco 

MS Gothic LJ 

MS Mincho 
MS PGothic 

MS PMincho a 

MS Reference Sans Sei ▼ 


CE 


0 


O C Colors 



.NT 


standard dialogs, 
sheets, and palettes 
in each platform 



Printer: Generic PostScript 
Presets: Standard _ 


Copies: 

i 


I 0 Collated 

Pages: ©All 




0 From: 1 

to: 1 

Paper Size: 

US Letter 

t 1 21.59 by 27.94 cm 

Orientation: 

t j_ 


IB 



TextEdit 


Q Print header and footer 


f K4 M } l of l [ ► ►»< ! 

® ( PDFt ) 


C Cancel ) Print 
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Graphic Design 

Goal: 

guide the user's attention and convey information clearly 
about the system's functionality and state 


Graphic Design 


i.e., use layout and color to organize and communicate 
economically 


Graphic Design Principles Graphic Design Principles 

Organize for neatness: Organize for grouping: 

use grids and alignment, balance and symmetry, nothing e.g., use labels, separators, proximity 

placed arbitrarily 











Spelling: English ( 

JSA) 












Not in Dictionary: 

abc 






Change to: 

Suggestions: 

Add words to: 








abs 

Ign 

)re 

Ignor 

: All 

abs 4 1 

V 

C Cha 

ige 


Chang 

e All 


O’ su 
S n 

X" 

0 

_1 

At 

d 


Sugg 

est 


1 art__lJ 







Custom Dictionary i 1 

AutoC 

arrect 

Clo 

;e 











o 

| M | | | Show All | 


Appearance 


Appearance: PH Graphite i ' 

For the overall look of buttons, menus, and windows 

Highlight color: '_Graphite 11 

For selected text 

Place scroll arrows: ©Together 

Q At top and bottom 

Click in the scroll bar to: ©Jump to the next page 

Ojump to the spot that’s clicked 

0Use smooth scrolling 

0 Double-click a window's title bar to minimize 


Number of recent items: None 


None 

None 


I Applications 
) Documents 
I Servers 


0 Use LCD font smoothing when available 


Turn off text smoothing for font sizes 8 


t I and smaller 









































Graphic Design Principles 


Organize for 
grouping: 

e.g., use tabs, 

indentation, 

borders 



AutoCorrect: English (US) 


m j3w] 



Back/Forward Show All 


Search Word Preferences 


1*5 Automatically correct spelling and formatting as you type 



AutoCorrect Math AutoCorrect AutoFormat as You Type AutoText 


0 Show AutoCorrect smart button 

1*5 Correct TWo INitial CApitals 
C Capitalize first letter of sentences 
0 Capitalize names of days 
Wf Capitalize first letter of table cells 

Replace text as you type 

Replace: With: 


r Exceptions... 


|*5 Automatically use suggestions from the spelling checker 


Description of preference _ 

AutoCorrect 

Use AutoCorrect to correct text and formatting as you type. 


Cancel 
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Graphic Design Principles 

Organize for grouping: 

use repetition to show similarity and unity 


^ 

[«l ► 11 °° i = i Pali EH 


▼ DEVICES 

Mac 

E Users 

iDisk 


References 

a 

▼ PLACES 


jA Applications 


fjj kenw 


jA Applications 


; Documents 


© Downloads 


jjj Library 



Open 


[ < ► ] [ gg = ■ DP] .J) Users 
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r DEVICES 
:~1 Mac 


kenw 


Ul iDisk 

= References — L. 

r PLACES 

;A Applications 
kenw 

;.A Applications 
Documents 


Save As: Untitled.txt 


Plain Text Encoding: 



Plain Text Encoding: f Unicode (UTF-8) 
^ New Folder 


U 


0 If no extension is provided, use “.txt". 


J 



Graphic Design Principles 

Organize for order and flow: 

arrange elements in sequence to efficiently guide the 
user's eyes and support the task 



Graphic Design Principles 

Economize for clarity: 

get the most out of a minimal set of cues 



O Mail Merge Manager 

▼ 1. Select Document Type 
Create New ’ 

2. Select Recipients List 
Get List • [J g? 

3. Insert Placeholders 

Drag placeholders into document: 


^Contacts 


No Data (Choose a data source) 


4. Filter Recipients 
Options... 

5. Preview Results 

>' (a) 

6. Complete Merge 

All 


From: 


To: 
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Graphic Design Principles 

Economize for quick recognition: 

use icons, pictures, previews, and affordances to remind 



Graphic Design Principles 

Economize for reducing clutter: 
focus on the essentials 


fs o O 

| 4 | | | Show All ] 


Print & Fax 



_ 


Printers 

Generic PostScript 

1 —=—» « Idle, Last Used 

UAAth 326 HP 815... 

4# « idle 

UA Ath 326 Xerox 5755 IPP 

>> 

Open Print Queue... 

UAAth 326 Xerox 5... 
Idle 

( Options & Supplies... ) 


Location: UA 


Kind: Xerox WorkCentre 5755, 1.2.0 


Status: Idle 


□ Share this printer on the network ( Sharing Preferences... ) 

+ : if™" 



Default printer: 1 Last Printer Used 

3 


Default paper size: US Letter 

3 




Click the lock to prevent further changes. 




' o n 

Network 



| 4 | ► ] [ Show All | 


■■fr 

J 


Location: Automatic 

3 



, Bluetooth DUN 

Not Connected 

( Ethernet 

Not Connected 


Not Connected 


0 

<•••> 


Status: Connected Turn AirPort Off 

AirPort is connected to Real and has the IP 
address 10.0.1.2. 


Network Name: Real 


Z3 


0Ask to join new networks 

Known networks will be joined automatically. 
If no known networks are available, you will 
be asked before joining a new network. 


802.IX: UWS 


( Connect ) 


+ - 

JP> 


0 Show AirPort status in menu bar Advanced .. ) (?) 


Click the lock to prevent further changes. 


f Assist me... ) Revert Apply 
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Graphic Design Principles 

Economize for streamlining tasks: 
simplify the most common case 



Graphic Design Principles 

Distinctiveness: 

if two nearby things are not the "same", 
make them look different 


Print 


Printer: Generic PostScript 
Presets: Standard 

Copies & Pages 
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Copies: 1 @0 Collated 

Slides: @ All (77 slides) 

O From: [l 

to: [77 

O Selected Slides 


UnmncrolAlMm 


USER INTERFACE 

Print What: 

Slides 

*1 

3 

DESIGN 

Slide Show: 

All Slides 


Output: 

Color 

3 


□ Scale to Fit Paper 
(Vf Print Hidden Slides 

□ Frame Slides 


[44 4 ] 1 of 77 [ ► ►> 

Show Quick Preview 
Page Setup... 


(?) ■ PDF ▼ i ( Preview ) 


Cancel ( Print ) 


position 

size 

shape 

color 

lightness 

texture 

etc. 
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Graphic Design Principles 

Distinctiveness: 

the eye is attracted by 


t is isolated 

color versus non-color 
saturated colors 
different typefaces 

bigger elements 



Using Color 

Tips: 

be selective 

• maximize the effect when used minimally 
be consistent in meaning 

• test passed, program stopped 


ry 

1 “ 

avoid blue for foreground elements 


Using Color 

Tips: 

in an alert, don't highlight the"dangerous" choice in red 


Using Color 

Tips: 

use foreground and background colors that contrast well 


avoid overuse of too many saturated colors 
can cause visual fatigue 





















Using Color 

Tips: 

combine color with shape, brightness, position, text labels, 
etc. for redundancy 

• because of color blindness or poor vision 



Bad Designs 
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Interface Hall of Shame 


Link: 

http://homepage.mac.com/bradster/iarchitect/shame.htm 
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Poor Use of Tabs 
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Poor Use of Tabs 




Poor Use of Visual Elements 


@ MIDI Orchestrator - (Untitled) 


File Options Help 




Song 

Position 


AM 

■ 

i 

9 

A 


tn 


8fi oj 


m 

hi 

s 

m 

r 

9 I 

Q°] 

hn 



Now installing files, please wait... 


Writing: E:\DRAWLT\SAMPLES\S-06-20.VLM 
Percent Copied: OX 


^00X 


Press [Esc] To Abort 


Bad Designs 

Link: 

http://www.baddesigns.com/ 
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Visibility Problem 
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© baddesigns.com 
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Affordance Problems 



baddesigns.com 



Mapping Problems 



© baddesigns.com 
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Distinctiveness Problems 



Proximity Problems 




r 

1 




In 


L 

i 



© baddesigns.com 
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© baddesigns.com 


56 


































More Information 

More Information 

Books: 

Java Look and Feel Design Guidelines 

Books: 

Graphic Design for Electronic Documents and User 

• Sun Microsystems 

• Addison-Wesley, 2001 

Interfaces 

• A. Marcus 

• ACM Press, 1992 

Interaction Design 


• J. Preece, Y Rogers, and H. Sharp 

• Addison-Wesley, 2002 

Designing Visual Interfaces 

• K. Mullet & D. Sano 

• Prentice-Hall, 1995 


More Information 

More Information 

Books: 

The Essential Guide to User Interface Design 

Links: 

User Interface Design for Programmers 

• W.O. Galitz 

• http://www.joelonsoftware.com/uibook 

• Wiley, 2002 

/fog0000000249.html 

One-Minute Designer 


• R.C. Parker 


• MIS Press, 1997 



